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JavaScript 



In addition to HTML and CSS... 

Browsers have a powerful programming language called 
JavaScript that runs in the browser 

Actually not much like Java - more like C 

Very powerful and flexible - we keep "discovering" new 
power 



http://en.wikipedia.org/wiki/JavaScript 



Language Syntax 



Whitespace does not matter - spaces and new lines 
Begin and end of blocks are curly braces 
Statements must end in semicolons 



function message() 
alert("This alert box was called with the onload event"); 



Language Syntax 

> Javascript supports comment characters that start and 
end a comment and can be multiline as well as a 
comment character that comments to the end of the 
current line 

function messageQ 



/* I am a 

multi-line comment */ 
alert("This alert box was called with the onload event"); 
// I am a comment to the end of one line 



The Most Useful JavaScript 



The alert box is often the way we debug simple 
JavaScript 

When it runs - alert makes a pop up box 




JavaScript 

Hello from JavaScript 



alert("Hello from JavaScript"); 



Including JavaScript in a Page 



Include an File from a URL 

Inline Code 

As an Attribute on a Tag 



Including a File from a URL 



<html xmlns="http://www.w3.org/ 1 999/xhtml"> 

<head> 
<title>App Engine - HTML</title> 

<link href="/static/glike.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src=7static/js/jquery- 1 .2.6.min.js"></script> 

</head> 



<body: 
<div id="header"> 



Inline Javascript 



<html> J 

<head> 

</head> 



<body> 

<h I >Here is my Document</h I > 
<script type="text/javascript"> 
alert("Hello from JavaScript"); 
</script> 

<h I >Here is my second Header</h I > 
</body> 
</html> 



Inline JavaScript 

runs as the page 

loads. 



inline.htm 



Validating Inline Javascript 



<h I >Here is my Document</h I > 
<script type="text/javascript ,, > 

/*<![CDATA[*/ 

alert("Hello from JavaScript"); 

/* ]]> */ 
</script> 

<h I >Here is my second Header</h I > 
</body> 
</html> 



We add Javascript 

comments and a 

CDATA tag to pass 

XHTML and 

HMTL4 Strict 

Validation 



inline.htm 



Here is my Document 




JavaScript 

Hello from JavaScript 



Here is my Document 
Here is my second Header 



( °« ^ 



<html> 
<head> 
</head> 
<body> 

<h I >Here is my Document</h I > 
<script type="text/javascript"> 
alert("Hello from JavaScript"); 
</script> 

<h I >Here is my second Header</h I > 
</body> 
</html> 



http://www.dr-chuck.com/javascript/one.htm 



Event Handling 



Certain tags have attributes which contain JavaScript 
which run when things (events) "happen" to the tag 

http://www.w3schools.com/jsref/jsref_events.asp 

onchange, onclick, onmousedown, onmouseup .. 



<a href="http://www.umich.edu" onclick="alert('Ouch!') n >Plan A</a> 



<body> 
<p> 

<a href="http://www.umich.edu" onclick="alert('Ouch!')"> 

Plan A</a> 

</p><p> 

<a href="http://www.umich.edu" onclick="alert('Yow!');return false;": 

Plan B</a> 

</p> 

</body> 



Returning false in these 
events means "don't do 
what you were going to 
do". In this case, Plan B 
will not follow the link 
afte the popup. 




http://www.dr-chuck.com/javascript/two.htm 



<html> 

<head> 

<script type="text/javascript"> 

function messageQ 



http://www.dr-chuck.com/javascript/three.htm 



alert("This alert box was called with the onload event"); 



</script> 

</head> 

<body onload="message()"> 

<hl>HelloWorld</hl> 

</body> 

</html> 



Another 
Event 



http.//www.w3schools.com/js/tryit.asp?filename=tryjs_headsection 



<form method="post" action=7apply"> 
<p> 

<label for="name">Name:</label> 
<input type="text" name="name" id="name7> 
</p> 

<P> 

<label for="account"> Account:</label> 

<input type="text" name="account" id="account7> 

</p> 

<P> 

<label for="password"> Password:</label> 

<input type="password" name="password" id="password7> 

</p> 

<input type="submit" name="Login7> 

<input type="button" onclick="window.location=V , ; return false;" 
value- 'Cancel" /> 
</form> 



Document Object Model 



http://en.wikipedia.org/wiki/Document_Object_Model 



Document Object Model 



JavaScript can manipulate the current HTML docment 

The "Document Object Model" tells us the syntax to 
use to access various "bits" of the current screen to 
read and/or manipulate 

You can even find pieces of the model by id attribute 
and change them 



http://en.wikipedia.org/wiki/Document_Object_Model 



<input type="button" onclick="wjndow.location=V , ; return false;" 
value="Cancel" /> 



When this button is clicked, go into the 

document model at window.location and 

change it to be "/", and do not submit this 

form. 



http://www.dr-chuck.com/javascript/four.htm 

<a href="#" 

onclick="document.getElementByld('stuff).innerHTML = , BACK';">BACK</a> 
<a href="#" 

onclick="document.getElementByld('stuff).innerHTML = , FORTH';">FORTH</a> 



Hello <b><span id="stuff'>Stuff</span></b> there. 

</p> 



Updating the Browser 
Document 

This is one reason why 

you can only have one id 

per document. 



BACK FORTH 



Hello Stuff there. 



BACK FORTH 



Hello BACK there. 



BACK FORTH 



Hello FORTH there. 



JavaScript 
Errors 



Generally silently ignored 
byt hte browser 

FireFoxrTools -> Error 
Console 



http://w\A^w.dr-chuck.com/javascript/five.htm 

<html> 
<body> 

<h I >Here is my Document</h I > 
<script type="text/javascript"> 
alort("Hello from JavaScript); 
</script> 

<h I >Here is my second Header</h I > 
</body> 
</html> 






Error Console 



CD 



[ All | | Warnings Messages ] [ Clear] 



Code: 



Eva Late 



Error: alort is rot defined 

Source File: fil e: ///Use rs /csev I Desktop /publish /book Jappenqine/svn/apps/iavascript/error.ht in 



Line: 7 



FireBug - JavaScript / DOM 



If you are going to do *any* non-trivial JavaScript and/or DOM 
manipulation 

1 Get FireBug for FireFox 

1 addons.mozila.org 

Many Javascript errors are *silent* - FireBug notices the errors 



Mozilla Firefox 




^^ ^ ^ @file:///Users/csev/Desktop/javascriptystu(f.htrtT l> 0" Google 


Q. K 




Sakai dr-cfiuck.com NWA Chuck's Media iPhone Navigation 13k CT SI 182. v, 18k 


.>;' Disable - £. Cookies * CSS - .: J Forms T - Images * ) Information - Miscellaneous ~ ^ Out 


ne T ^ Resis 


BACK FORTH 




Hello Stuff there. 




■ifr Inspect window Q, 


« © 


Console HTML CSS Script [ DOM J Net 


Options t 


scroll* 




scrollY 3 




scrollMaxX 




scrollMaxY 




status 




default5tatus 




► parent Window stuff, htm 




opener 


► top Window stuff, htm 




► window Window sti/ffhtm 




*■ content Window stuff. htm 




t*- self Window stutf,htm 




► location file:///Users/cscv /Desktop/javascript) stuff.htm 




► history [ "http://en-us .wti'h , nioz\'. '. a . com/en- U£/flref ox/2 . ®.<3 . 17/whotsnew/" j 


"f ilei/Z/Users/csev/uesktop/JDvascript/stuff .htm" ] 




► frames Window stuff htm 




► navigator Navigator appCodeName=Mnz/y/jappName=A(e'f5fj/je 




screen Screen top= lcft= width= 1440 height=5PP pixelDep(h = 5Z 




► menubar BarProp visible=O r i r e 




► toolbar BarProp visiblc=friire 




► locationbar BarProp visible=£rt/e 




► personalbar BarProp visiblc=fri/e 




►■ statu s bar BarProp visible=fri/e 








Done 


o ^ 



JavaScript Summary 



There is a lot of power in JavaScript - we keep "discovering" new 
uses and capabilities of JavaScript 

JavaScript is increasingly being treated as a very serious language 
- including using it in the server as well as the browser 

People now specialize as JavaScript developers 



http://www.w3schools.com/js/js_examples.asp 



JavaScript "Compilers 



Some languages can be "compiled" into Javascript 

Google Web Tool Kit -Java 

Ruby - Red 

Pyjamas - Python 
Google Chrome -Very Fast Javascript 



Asynchronous JavaScript and 

XML (Ajax) 



http://en.wikipedia.org/wiki/Ajax_(programming) 



In The Good Old Days 



A user would take some action like a click on a link or button 



The Browser would make a TCP/IP connection to the web 
server 



The browser would send a POST or GET request 

The Server would send back a page to display to the user 

Repeat the Request-Response Cycle... 



Browser 



Redraw Redraw 



Whole 



Whole 



Whole 



Whole 



GET 



GET 



POST 



GET 



Server 



XMLHttpRequest 



By 1999, Microsoft wanted to move some of the processing of web 
pages from the web server to the web browser 

The idea was instead of sending whole pages of HTML to the browser, 
send out the data to be displayed as XML and then produce 
presentation in JavaScript in the browser 

Originally a Microsoft innovation - other browsers soon adopted the 
idea and it became a defacto standard with a little variation between 
browsers :) 

It soon became clear that this could send ^anything* - not just XML 
back and forth between a browser and client 



http://en.wikipedia.org/wiki/XMLHttpRequest 



Browser 



Redraw Update 



Whole 



Fragment \ /Fragment 1 / Fragment 




HTTP 
REQ 



HTTP 
REQ 



HTTP 
REQ 



Server 



AjaxArms Race 



The race was on to build better and better web sites that began 

to replace things like frames and full-screen updates with 

Xm I Http Request operations and very selective screen updates. 

With clever JavaScript programmers - the impossible became 
possible - drag and drop, automatic field completion - automatic 
data saving. It made the web operate much more like the 
desktop. 

Applications like GMail and Google Maps - feel very un-web. 



Ajax versus Request/Response 



Standard Request/Response 

• Each click presents a whole new screen 
Ajax -Asynchronous JavaScript and XML 

• Each action sends data and receives results in the background. 

• The browser typically gets back a fragment of HTML or XML 
which is used to update a portion of the screen using the 
browser document model 



Lots of Flexibility 



When you combine the ability to rewrite the Browser document 
model with the ability to interact with the web server from 
JavaScript - there is lots of potential fun 

Different browsers did things a *little* differently - this led to the 
rise of Ajax Libraries 



Ajax Libraries 



Prototype - Basic portability and common functionality 

• http://www.prototypejs.org/ 
Script.aculo.us -Animation and effects 

• http://script.aculo.us/ 

jQuery - General purpose - http://jquery.com/ 

Google Web Toolkit - http://code.google.com/webtoolkit/ 



Accessibility with Ajax 



It is not perfect 
Needs further study 
Lots of investment going on 
Fluid Project - Univ. Toronto 
1 http://www.fluidproject.org/ 



Flufd 



Designing software 

that works - for everyone 






Home 

About Fluid 

News 

Get Involved 

Partners 

Technical Information 

User Experience 

Meetings 



What is Fluid? 

Fluid is a worldwide 
collaborative project 
to help improve the 
usability and 
accessibility of 
community open 
source projects with 



Community Resources 

* Fluid Wiki: collaborative 
documentation, technical 
architecture information, 
and user experience 
material for the Fluid 
Project. 

* Fluid Blog: learn more 
about the progress of 
Fluid directly from 



Google App Engine 
jQuery and Ajax 

ae- 1 2-ajax 



http://ae- 1 2-ajax.appspot.com/ 



Ajax Enabled Chat 



We will update the list of messages in the background every four 
seconds 



This way we will see messages from other people "appear" on 
our screen - even if we are typing 



App Engine - HTML 


* ► C | <& | [ + | 0http://localhost:SOSC/chat 


> - (Q? ajax 






App Engine Sites Topics 


Chat Members Lopout (csevl 



Appengine Chat 



[ 5ubmit i 



Yes, it was surprisingly easy - make sure to look at the key() method (sally) Sat 22 Nov 2008 
Have you used a Reference yet? (csev) Sat 22 Nov 2008 
Hi there (sally) Sat 22 Nov 2008 



//\ 



We will put the chat messages in a div 
and update the div using Ajax. 



IntallingJQuery 



Go to jquery.com - download the latest version - source code 
Place it in your application under the static folder 




Installing jQuery 



To use the jQuery library in your HTML, you need to include it 
Typically this is done in _base.htm in the <head> area 



<head> 
<title>App Engine - HTML</title> 

<link href='7static/glike.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src='7static/js/j query- 1 .2.6.min.js"></script> 

</head> 



HTML Fragments 



We need a page that just gives us message content 
No head material - not even a body tag 



App Engine- HTML 
[~4~\ > ] I 6 | |fl| | + j hup: //local host:8QS0/cha[ 



-'Q' Google 



o 1 



App Engine 



Sites Topics Login 



Appengine Chat 



( Submit ) 

Yes, it was surprisingly easy -make sure to look at trie key() method (salty) Sat 22 Nov 
2008 

Have you used a Reference yet? (csev) Sat 22 Nov 2008 

Hi there (sally) Sal 22 Nov 2008 



http://localhost:S080/me5sages 1 


|*|*||(S||<&|| + | 0rittn://localliost:BOS<Vmessages 


■r^ 


& 1 





Yes, it was surprisingly easy • make sure to look at the kcyQ method (sally) Sat 22 Nov 2008 
Have you used a Reference yet? (csev) Sat 22 Nov 2008 
Hi there (sally) Sat 22 Nov 2008 



def main(): 
application = webapp.WSGIApplication([ 

('/login', LoginHandler), 

('/logout', LogoutHandler), 

('/apply', ApplyHandler), 

('/members', MembersHandler), 

('/chat', ChatHandler), 

('/messages', MessagesHandler), 

('/*', MainHandler)], 

debug=True) 
wsgiref.handlers.CGIHandlerQ.run(application) 



New Routing Entry 



class MessagesHandler(webapp.RequestHandler): 

def get(self): 

que = db.Query(ChatMessage).order("-created"); 

chat_list = que.fetch(limit=IO) 

doRender(self, 'messagelist.htm 1 , {'chat_list': chat_list}) 



Retrieve the recent the ChatMessage messages and 
put them in the context for out new messages.htm 

template. 



templates\messagelist.htm 



{% for chat in chatjist %} 
<p>{{ chattext }} ({{chat.user.acct}}) 
{{chat.created|date:"D d MY"}}</p> 
{% endfor %} 



Do not extend _base.htm - we do not want 

the headers. Loop through the messages in 

the context and print out each message 

enclosed in a paragraph tag. 



templates\messages.htm 

{% for chat in chatjist %} 
<p>{{ chattext }} ({{chat.user.acct}}) 
{{chat.created|date:"D d MY"}}</p> 
{% endfor %} 


^^^^^^^^^^^^^H 




^^^^^^^^^^^^^1 4 | C | | <J | [ + ] 0http://localhost:8O8O/messages *■ Qj 


1 Yes, it was surprisingly easy - make sure to look at the kcy() method (sally) Sat 22 Nov 2008 
1 Have you used a Reference yet? (csev) Sat 22 Nov 2008 
1 Hi there 22 Nov 





{% extends "_base.htm" %} 
{% block bodycontent %} 

<h I >Appengine Chat</h I > 

<form method="post" action=7chat"> 

»> 
<input type="text" name="message" 

size="607> 
<input type="submit" name="Chat7> 






</form> 

{% ifnotequal error None %} 



{{ error }} 
</p> 
{% endifnotequal %} 

chatscreen.htm 



<div id="chatcontent"> 

Loading... 
</div> 
<script>/*<![CDATA[*/ 
function updateMsg() { 
$.ajax({ 
url: 7messages", 
cache: false, 
success: function (frag){ 
$("#chatcontent").html(frag); 



setTimeoutCupdateMsgO', 4000); 



updateMsg(); 
/* ]]> */ 
</script> 
{% endblock %} 





<div id="chatcontent"> 

Loading... 
</div> 
<script> /*<![CDATA[*/ 
function updateMsg() { 
$.ajax({ 
url: "/messages", 
cache: false, 
success: function(frag){ 
$("#chatcontent").html(frag); 

} 

}); 

setTimeout('updateMsg()', 4000); 

} 
updateMsg(); 

/* ]]> */ </script> 

{% endblock %} 


The chatcontent div is where we will 

put the messages which we retrieve 

from the /messages url. 

The $ajax() call is from jQuery. It 

retrieves a URL and then looks up a 

named div and replaces its html 

content. 

Then we request that this be done 
every 4 seconds. 



INFO 


2008-11-23 04:00:52,996 index, py] messages, htm 




INFO 


2006-11-23 04:00:53,01$ dev_qppserver,py] "GET /messages?_-1227412852966 HTTP/1. 1" 


200 - 


INFO 


2008-11-23 04:00:56,997 index. py] messages.htm 




INFO 


2008-11-23 04:00:57,016 dev_qppserver , py] "GET /messages?_=1227412856968 HTTP/1.1" 


200 - 


INFO 


2008-11-23 04:01:00,997 index, py] messages . htm 




INFO 


2008 11-23 04:01:01,013 dev_gppserver * py] "GET /messages?_-l2274l2860970 HTTP/1, 1" 


200 - 


INFO 


2008-11-23 04:01:05,003 index, py] messages.htm 




INFO 


2008-11-23 04:01:05,021 dev_appserver , py] "GET /messages?_-l227412864972 HTTP/l,!" 


200 - 


INFO 


2008-11-23 04:01:09,005 index, py] messages.htm 




INFO 


2008-11-23 04:01:09,028 dev_appserver,py] "GET /messages?_-l2274l2868976 HTTP/l,!" 

You can watch the log as the Ajax requests 

come in every 4 seconds. 

The timestamp changes to make sure that the 

pages are not cached. 


200 - 



class ChatHandler(webapp.RequestHandler): 

def get(self): 

que = db.Query(ChatMessage).order('-created'); 

chat_list = que.fetch(limit=IO) 

doRender( 

self, 

'chatscreen.htm 1 , 

{ 'chatjist': chatjist }) 



The chatscreen.htm no longer needs the list of 
messages since they comes out in "/messages". 



class ChatHandler(webapp.RequestHandler): 

def get(self): 

que = db.Query(ChatMessage).order('-created'); 

chat_list = que.fetch(limit=IO) 

doRender( 

self, 

'chatscreen.htm') 



The chatscreen.htm no longer needs the list of 
messages since they comes out in "/messages". 



Ajax Summary 



This is one of hundreds of Ajax techniques supported 
byJQuery 

It is a very common and useful pattern 

http://www.jquery.com/ - much more detail 



